<!--
 * @FileDescription
 * @Author lz
 * @Date 20230222 10:32:49
 * @LastEditors lz
 * @LastEditTime 20230222 10:32:49
-->
<template>
    <div class="PopupWp" v-show="HomeContent.Default.WorkOrderShow.value">
        <div class="content">
            <img src="/colImages/ch_close.png" class="ch_close" @click="closeBtn">
            <div class="tit">
                {{ state.newData.Title }}
            </div>
            <div class="labelBox">
                <div class="row_1" v-for="(item, index) in state.newData.CalibrationContentGroups">
                    <div class="r1_tit">
                        {{ item.Title }}
                    </div>
                    <div class="DataRow" v-for="(j, indexs) in item.CalibrationContentItems">
                        <div class="EntryBox" v-for=" g in j ">
                            <img src="/colImages/punctuation_2.png" class="ornament_ico">

                            <div class="entName">
                                {{ g.Title }}<span v-if="g.Unit != ''">({{ g.Unit }})</span>
                            </div>
                            <div>
                                <input type="text" v-model="g.Value" class="inp" placeholder="请输入..." @blur="submitTo(g)">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="BtnBox">
                <div class="btn_1" @click="show()">
                    四元数据转换工具
                </div>
                <div class="btn_2" @click="SubmitWorkOrder()">
                    标定
                </div>
                <!-- <div class="btn_3">
                    重置
                </div> -->
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref, toRefs, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits } from 'vue'
import HomeContent from '../HomeContent';
import MessageCode from '../MessageCode';
import { message } from 'ant-design-vue'
import AppraisalData from '../appraisalSettings/appraisalSettings';
const state = reactive({
    newData: {
        Title: "相机标定系统",
        CalibrationContentGroups: [
            {
                Title: "传感器尺寸",
                CalibrationContentItems: [
                    [
                        {
                            Title: "激光雷达直径",
                            Value: '',
                            Unit: "m",
                            Id: 1,
                        },
                        {
                            Title: "激光雷达直径1",
                            Value:'',
                            Unit: "m",
                            Id: 2,
                        },
                        {
                            Title: "激光雷达直径2",
                            Value: '',
                            Unit: "m",
                            Id: 3,
                        },
                        {
                            Title: "激光雷达直径3",
                            Value: '',
                            Unit: "m",
                            Id: 4,
                        }
                    ]
                ]
            }
        ]
    }
});
function closeBtn() {
    HomeContent.Default.WorkOrderShow.value = false
}
function show() {
    HomeContent.Default.toolrShow.value = true

}
function getData() {
    if(HomeContent.Default.CacheFullData.value && HomeContent.Default.CacheFullData.value.FaultPointCollection){
       let newArr: any = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.CalibrationAdapterRequest(MessageCode.Default.MsgCodesList.CALIBRATION_ORDER_GET, `${HomeContent.Default.CacheFullData.value.FaultPointCollection.toString()}`))
       newArr.then((res: any) => {
          state.newData = JSON.parse(res.Content).Result
       })
    } else{
       let newArr: any = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.CalibrationAdapterRequest(MessageCode.Default.MsgCodesList.CALIBRATION_ORDER_GET, `${AppraisalData.Default.WorkOrderId.value}`))
       newArr.then((res: any) => {
          state.newData = JSON.parse(res.Content).Result
       })
    }  
}
function submitTo(val: any) {
    console.log('val',val);
    
    WebSocketComponent.Default.PostMessageAsync(new ClientMessage.CalibrationAdapterRequest(MessageCode.Default.MsgCodesList.CALIBRATION_ORDER_UPDATE, JSON.stringify(val)))
}
function SubmitWorkOrder() {
    let newArr = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.CalibrationAdapterRequest(MessageCode.Default.MsgCodesList.APPRAISE_SUBMIT_ORDER))
    newArr.then((res: any) => {
        message.warning(JSON.parse(res.Content).Result)
        HomeContent.Default.WorkOrderShow.value = false
    })
}
onMounted(() => {
    getData()
})
</script>

<style scoped>
.PopupWp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.content {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1187px;
    height: 920px;
    transform: translate(-50%, -50%);
    background-image: url('/colImages/PopBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 90px;
}

.ch_close {
    width: 77px;
    height: 77px;
    position: absolute;
    right: -8px;
    top: 8px;
}

.tit {
    position: absolute;
    left: 50%;
    top: 12px;
    font-size: 30px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #FFFFFF;
    transform: translate(-50%, 0);
    margin-top: 33px;
}

.row_1 {
    margin: 0 auto;
    margin-bottom: 34px;
    width: 98%;
}

.DataRow {
    display: flex;
}

.EntryBox {
    flex: 1;
    position: relative;
    margin-top: 10px;
}

.labelBox {
    height: 680px;
    width: 96%;
    overflow-y: auto;
    margin: 0 auto;
}

.labelBox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.labelBox::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #66E0FF;
}

.labelBox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #165A9A;
}

.r1_tit {
    width: 1000px;
    height: 41px;
    background-image: url('/colImages/tit_bg.png');
    background-repeat: no-repeat;
    background-size: 465px 100%;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    padding-left: 59px;
}

.inp {
    outline: none;
    border: none;
    width: 100%;
    height: 30px;
    background: linear-gradient(90deg, rgba(0, 162, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    color: #fff;
    font-size: 14px;
    padding-left: 10px;
    margin-left: 10px;
}

::placeholder {
    color: #fff;
    font-size: 14px;
}

.entName {
    padding: 7px 0;
    padding-left: 35px;
    font-size: 14px;
    font-weight: 500;
    color: #ACCFFF;
}

.ornament_ico {
    width: 69px;
    position: absolute;
    top: -16px;
    left: -20px;
    pointer-events: none
}

.BtnBox {
    margin: 0 auto;
    width: 1122px;
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
    line-height: 69px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
}

.btn_1 {
    width: 211px;
    height: 69px;
    background-image: url('/colImages/push-button_l.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    float: left;
    margin-left: 400px;
}

.btn_2 {
    width: 111px;
    height: 69px;
    background-image: url('/colImages/push-button_s.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    float: left;
}

.btn_3 {
    width: 111px;
    height: 69px;
    background-image: url('/colImages/push-button_s.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    float: left;
}
</style>